import React, { useEffect, useState } from 'react'
import {  Form, Row, Col, Input, Button, Select  } from 'antd';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
const { Option } = Select;
import StyleModule from './index.less'
import { useDispatch, useSelector } from 'umi';
import EmilTable from '../EmilTable';
import { EmilStateType } from '@/models/emil';



export default function emil() {
  const AdvancedSearchForm = () => {
    const [form] = Form.useForm();
  
    const getFields = () => {
      const count = 3;
      const children = [];
  
      // 称呼
      function CheckI(i:number){
        if(i == 0){
          return '发件人'
        }else if(i == 1){
          return '收件人'
        }else{
          return '主题'
        }
      }
      // 模糊提示
      function CheckPlace(i:number){
        if(i == 0){
          return '请输入发件人'
        }else if(i == 1){
          return '请输入收件人'
        }else{
          return '请输入主题'
        }
      }
      for (let i = 0; i < count; i++) {
        children.push(
          <Col span={8} key={i}>
            <Form.Item
              name={`inp${i}`}
              label={`${CheckI(i)}`}
            >
              
                {<Input placeholder={CheckPlace(i)} />}
              
            </Form.Item>
          </Col>,
        );
      }
  
      return children;
    };
  
    const onFinish = (values: any) => {
      dispatch({
        type: 'emil/searchEmilList',
        payload: {
          page: 1,
          ...values
        }
      })
    };
  
    return (
      <Form
      
        form={form}
        name="advanced_search"
        className="ant-advanced-search-form"
        onFinish={onFinish}
      >
        <Row gutter={24}>{getFields()}</Row>
        <Row>
          <Col
            span={24}
            style={{
              textAlign: 'right',
            }}
          >
            <Button type="primary" htmlType="submit">
              搜索
            </Button>
            <Button
              style={{
                margin: '0 8px',
              }}
              onClick={() => {
                form.resetFields();
              }}
            >
              重置
            </Button>
          </Col>
        </Row>
      </Form>
    );
  };
  const dispatch = useDispatch() 
  const { EmilList, EmilLength } = useSelector((state:{ emil: EmilStateType }) => state.emil)

  useEffect(() =>{
    dispatch({
      type: 'emil/getEmilList',
      payload:{
        page: 1
      }
    })
  },[])

  return (
    <div className={StyleModule.from}>
      <div className={StyleModule.searchHeader}>
        <AdvancedSearchForm />
      </div>
      <div className={StyleModule.comment_main}>
          <EmilTable />
        </div>
    </div>
  )
}
